<!DOCTYPE html>
<html lang="en" xmlns:https="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
        }

        .column {
            flex: 1;
            padding: 10px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-main>
            <el-card>
                <el-card style="background-color: #e8e8e8">
                    <el-row style="margin-top: 30px">
                        <el-col span="24">
                            <span>订单号:1657945621345</span>
                        </el-col>
                        <el-col span="24"style="margin-top:20px">
                            <span style="font-weight: bold;font-size: 20px;">交易关闭   支付超时,交易已关闭</span>
                            <span style="font-weight: bold;font-size: 20px; ;float: right" >需付款: ¥410.00</span>
                        </el-col>
                    </el-row>
                </el-card>
                <el-divider></el-divider>
                <el-divider></el-divider>
                <el-card style="background-color: whitesmoke;font-size: 15px;height: 50px; border: 1px solid  white">
                    <el-row gutter="30px">
                        <el-col span="24">
                            <span   style="margin-left: 200px;">项目信息</span>
                            <span  style="margin-left: 200px;">单价</span>
                            <span  style="margin-left: 200px;">数量</span>
                            <span  style="margin-left: 200px;">优惠</span>
                            <span  style="margin-left: 200px;">小计</span>
                        </el-col>
                    </el-row>
                </el-card>
                <el-divider></el-divider>
                <el-divider></el-divider>
                <el-card style="background-color: #e8e8e8">
                    <el-row>
                        <el-col span="10">
                            <p> My Beautifulive 杨千嬅世界巡回演唱会海口站</p>
                            <p>演出场次2020.01.11. 11:20:00</p>
                            <p>演出场馆:海口市五河源体育中心体育场</p>
                        </el-col>
                        <el-col span="6"> <p>暂无座位信息</p></el-col>
                        <el-col span="2"><p>¥398.00</p></el-col>
                        <el-col span="2"><p>1</p></el-col>
                        <el-col span="2">-</el-col>
                        <el-col span="2"><p>¥398.00</p></el-col>
                    </el-row>
                </el-card>
                <el-divider></el-divider>
                <el-divider></el-divider>
                <el-card style="background-color: #e8e8e8;border: 1px solid  white">
                    <div class="container">
                        <div class="column">
                            <!-- 第一列的内容 -->
                            <div>
                                <p>配送信息</p>
                                <p>配送方式: 快递票</p>
                                <p>收货地址: 安徽省合肥市瑶海区</p>
                                <p>收货人: 李煜</p>
                                <p>手机号: 138****3214</p>
                            </div>
                        </div>
                        <div class="column">
                            <!-- 第二列的内容 -->
                            <div>
                                <p>订单信息</p>
                                <p>订单编号 :45678916855454</p>
                                <p>创建时间: 2023.07.20 15:35:20</p>
                            </div>
                        </div>
                        <div class="column">
                            <!-- 第三列的内容 -->
                            <div>
                                <p>金额明细</p>
                                <p>商品总价: ¥398.00</p>
                                <p>店铺优惠: ¥6.00</p>
                                <p>运费: ¥18.00</p>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-divider></el-divider>
                <el-divider></el-divider>
                <el-card style="background-color: #e8e8e8; border: 1px solid  white">
                    <el-row>
                        <el-col span="24">
                            <p>购票人</p>
                            <p>购票人姓名: 赵匡胤</p>
                            <p>证件类型: 身份证</p>
                            <p>证件号码: 3412************024X</p>
                        </el-col>
                    </el-row>
                </el-card>
                <el-divider></el-divider>
                <el-divider></el-divider>
            </el-card>

        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v=new Vue({
        el:"body>div",
        data:{
            info:""
        }
    })

</script>

</body>
</html>